<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>Title</title>
    <link rel="stylesheet" href="../css/app.css">
</head>
<body>
    <header class="herader">
        <a href="#" class="menu"></a>
        <a class="title">
            <span>全部短信</span>
            <img src="../img/down-arrow.png" alt="">
        </a>
        <div class="select-box" style="display: none">
            <ul>
                <li class="selected">
                    <a href="#">全部短信</a>

                </li>
                <li><a href="#">已发送</a></li>
                <li><a href="#">待审核</a></li>
                <li><a href="#">已驳回</a></li>
            </ul>
        </div>
    </header>
    <div class="content">
        <div class="list-box">
            <ul>
                <li>
                    <span class="list-title">报名单：</span>
                    <span class="list-cont">亲子活动</span>
                </li>
                <li>
                    <span class="list-title">短信数量：</span>
                    <span class="list-cont">100</span>
                </li>
                <li>
                    <span class="list-title">状态：</span>
                    <span class="list-cont">已发送</span>
                </li>
                <li>
                    <span class="list-title">短信内容</span>
                    <span class="list-cont">能搜到发你速度快解放开始刀锋女王克己复礼sad拉开拉科技的萨克的垃圾的卢卡斯加大了对克拉数量的骄傲立刻就打了可接受的</span>
                </li>
            </ul>
        </div>
        <div class="list-box">
            <ul>
                <li>
                    <span class="list-title">报名单：</span>
                    <span class="list-cont">亲子活动</span>
                </li>
                <li>
                    <span class="list-title">短信数量：</span>
                    <span class="list-cont">100</span>
                </li>
                <li>
                    <span class="list-title">状态：</span>
                    <span class="list-cont">已驳回<span style="color: #E50014;">(你得信息不合法)</span></span>
                </li>
                <li>
                    <span class="list-title">短信内容</span>
                    <span class="list-cont">能搜到发你速度快解放开始刀锋女王克己复礼sad拉开拉科技的萨克的垃圾的卢卡斯加大了对克拉数量的骄傲立刻就打了可接受的</span>
                </li>
            </ul>
        </div>
    </div>
    <script src="../lib/js/jquery/jquery.min.js"></script>
    <script>
        $(function () {

            $('.title').click(function (e) {
                e.stopPropagation();
                $('.select-box').toggle();
            });

            $('.select-box a').click(function () {
                $(this).parent().siblings().removeClass('selected');
                $(this).parent().addClass('selected');
            });
            $(".select-box a").click(function(){
                $(".title").children('span').text($(this).text());
                $(".select-box").hide();
            });
            $(document).click(function(){
                $(".select-box").hide();
            });

        })
    </script>
</body>
</html>